 $(function () {
     // 1.1 获取裁剪区域的 DOM 元素
     var $image = $('#image')
     // 1.2 配置选项
     const options = {
         // 纵横比
         aspectRatio: 1,
         // 指定预览区域
         preview: '.img-preview'
     }

     // 1.3 创建裁剪区域
     $image.cropper(options)

     //需求2: 选择图片
     $('#ChangeImageBtn').on('click', function () {
         $('#ChangeImageInp').triggerHandler('click')
     })

     //需求3: 渲染预览区域
     let layer = layui.layer
     $('#ChangeImageInp').on('change', function (e) {
         //console.log(this.value);
         //拿到用户选择的文件
         let file = e.target.files[0]
         //非空校验
         if (file === undefined) {
             return layer.msg('请选择上传头像图片')
         }
         //根据选择的文件，创建一个对应的 URL 地址：
         let newImgURL = URL.createObjectURL(file)
         alert(newImgURL)
         //先`销毁`旧的裁剪区域，再`重新设置图片路径`，之后再`创建新的裁剪区域`
         $image
             .cropper('destroy') // 销毁旧的裁剪区域
             .attr('src', newImgURL) // 重新设置图片路径
             .cropper(options) // 重新初始化裁剪区域
     })

     // 需求4 : 上传头像
     $('#uploadAvatar').on('click', function () {
        let dataURL = $image
      .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
      })
      .toDataURL('image/png')       // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
        axios({
             method: 'POST',
             url: '/my/update/avatar',
             data: 'avatar=' + encodeURIComponent(dataURL)
         }).then(function (res) {
            // console.log(res);
            if(res.data.status !==0){
                return layer.msg(res.data.message)
            }
           //成功提示,刷新index.html的头像
           layer.msg('换头像成功^^')
           window.parent.getUserInfo()
         })
         //jQ中的ajax是不需要编码的,底层已编码
     })
 })